<template>
	<view class="signature" :style="{height: scrollH + 'px'}">
		<canvas class="firstCanvas" canvas-id="firstCanvas" id="firstCanvas" @touchstart="start" @touchmove="move"
		 @touchend="end" @touchcancel="cancel" @longtap="tap" disable-scroll="true" @error="error">
		</canvas>
		<view class="button-wrapper">
			<text class="button reset-button" @click="clearClick">重签</text>
			<text class="button" @click="saveClick">写好了</text>
		</view>
		<image class="signatureImg" :src="signImage"></image>
		<text class="button done-button" @click="submitSignature">提交签名</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signImage: '',
				context: null,
				touchs: [],
				canvasw: 0,
				canvash: 0
			}
		},
		props: {
			scrollH: Number
		},
		onReady(e) {
			let that = this
			let res = uni.getSystemInfoSync()
			this.canvasw = res.windowWidth
			this.canvash = res.windowWidth * 9 / 16
			//获得Canvas的上下文
			this.context = uni.createCanvasContext('firstCanvas', this)
			//设置线的颜色
			this.context.setStrokeStyle('#000000')
			//设置线的宽度
			this.context.setLineWidth(5)
			//设置线两端端点样式更加圆润
			this.context.setLineCap('square')
			//设置两条线连接处更加圆润
			this.context.setLineJoin('bevel')
		},
		methods: {
			start(e) {
				//获取触摸开始的 x,y
				let point = {
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				}
				this.touchs.push(point)
				this.context.beginPath()
			},
			move(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.touchs.push(point)
				if (this.touchs.length >= 2) {
					this.draw()
				}
			},
			// 画布的触摸移动结束手势响应
			end(e) {
				let touchs = this.touchs
				//清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

			},
			// 画布的触摸取消响应
			cancel(e) {
				console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap(e) {
				console.log("长按手势" + e)
			},

			error(e) {
				console.log("画布触摸错误" + e)
			},
			//绘制
			draw() {
				let point1 = this.touchs[0]
				let point2 = this.touchs[1]
				this.touchs.shift()
				this.context.moveTo(point1.x, point1.y)
				this.context.lineTo(point2.x, point2.y)
				this.context.stroke()
				this.context.draw(true)
			},
			//清除画布
			clearClick() {
				let context = this.context
				let canvasw = this.canvasw
				let canvash = this.canvash
				context.clearRect(0, 0, canvasw, canvash)
				context.draw(true)
			},
			//保存图片
			saveClick() {
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						//设置保存的图片
						that.signImage = res.tempFilePath
					}
				}, this)
			},
			submitSignature(e) {
				this.$emit('onClick', this.signImage)
			}
		}
	}
</script>

<style>
	.signature {
		width: 690rpx;
		background-color: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.firstCanvas {
		width: 96%;
		height: 400rpx;
		background-color: #ccc;
	}

	.button-wrapper {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 96%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.button {
		width: 48%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 16rpx;
		text-align: center;
		background-color: #6EC2AE;
		color: #fff;
	}
	.reset-button{
		border: 2rpx solid #6EC2AE;
		background-color: #fff;
		color: #6EC2AE;
	}

	.signatureImg {
		width: 96%;
		height: 400rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}

	.done-button {
		width: 96%;
		margin-top: 100rpx;
	}
</style>
